<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

<title th:text=${title}></title>
<!-- 这儿引用单独的css link -->
<!-- Ladda for Bootstrap 3按钮加载进度插件 -->
<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
<!-- bootstrap-table表单样式 -->
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
	<!-- bootstrap-fileinput上传文件样式 -->
	<link th:href="@{/static/admin/assets/js/bootstrap/css/fileinput.css}" rel="stylesheet"/>
<!-- 用户界面自定义css -->
<link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>
<style type="text/css"></style>
</head>

<body>

<div class="content-wrap">
	<div class="row">
		<div class="col-sm-12">
			<div class="nest" id="elementClose">
				<div class="">
				</div>
				<div class="body-nest" id="element">
					<div class="panel-body">
						<form  class="form-horizontal m" id="form-add">
															<div class="form-group">
										<label class="col-sm-3 control-label ">任务标题：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="title" name="title"/>
										</div>
									</div>
															<div class="form-group">
										<label class="col-sm-3 control-label ">任务介绍(文本)：</label>
										<div class="col-sm-8">
												<textarea  style="width:612px" rows="10px" id="introduction" name="introduction"></textarea>
										</div>
									</div>
															<div class="form-group">
										<label class="col-sm-3 control-label ">发布总条数：</label>
										<div class="col-sm-8">
											<input class="form-control" type="text" id="number" name="number"/>
										</div>
									</div>
															<div class="form-group">
										<label class="col-sm-3 control-label ">上传图片：</label>
												<div class="col-sm-8">
													<input id="file-5" class="file" name="myfiles" type="file" multiple data-preview-file-type="any">
												</div>
									</div>
										<div class="form-group">
								<div class="form-control-static col-sm-offset-9">
									<button class="btn btn-primary">提交</button>
									<button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>

<!-- bootstrap-fileinut上p传文件js -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/fileinput.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/zh.js}" type="text/javascript"></script>
<!-- 弹窗 -->
<script  th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script  th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script  th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<script type="text/javascript">
	//上传文件开始
	$("#file-5").fileinput({
		uploadUrl:rootPath+"/FileController/upload2", // 后台使用js方法
		uploadAsync: false, //如想要批量上传成功后再回调的话则必须设置为同步上传 false
		showUpload: false, //是否显示上传按钮  这个上传按钮的回调是filebatchuploadsuccess
		showRemove:true, // 是否显示移除按钮
		showCaption: true,//是否显示标题"请点击上传图片!"
		minFileCount: 1,
		maxFileCount: 6,
		language : 'zh',
		msgFilesTooMany: '选择的上传文件个数 <b>({1})</b> 超出最大文件的限制个数 <b>{1}</b>.',
		dropZoneTitle: '拖拽文件到这里',
		allowedFileExtensions: ['jpg','png','xlsx'],
		uploadExtraData:function (previewId, index) {
			//向后台传递id作为额外参数，是后台可以根据id修改对应的图片地址。
			var data = {
				"previewId": "附加参数",      //此处自定义传参
			};
			return data;
		},
		initialPreviewAsData: true // identify if you are sending preview data only and not the markup
	}).on('filebatchpreupload', function(event, data) {
		if($('.imgClass').length>=6){
			var img = $(".kv-preview-thumb");
			img[6].remove();
			$(".kv-upload-progress").addClass("hide");
			return {
				message: "最多只能上传六张!"
			};
		}
	});
	//导入文件上传完成之后的事件
	$("#file-5").on("fileuploaded", function (event, data, previewId, index) {
		var previewId=previewId;
		var response = data.response;
		$("form").append("<input class='imgClass' type='hidden' id='a"+previewId+"' name='imageUrl'  value='"+response[0].pathUrl+"'>");
	});
	$('#file-5').on('filesuccessremove', function (event, previewId, extra) {
		//在移除事件里取出所需数据，并执行相应的删除指令
		$('#a'+previewId).remove();
	});
	$(".fileinput-remove-button").on("click",function(){  //删除按钮
		$('.imgClass').remove();
	});
	//点击浏览框右上角X 清空文件前响应事件
	$("#file-5").on("fileclear",function(event, data, msg){
		$('.imgClass').remove();
	});
	//上传文件结束


$(function(){
	 $(".MyDate").datetimepicker({
		 	format: "yyyy-mm-dd hh:00:00",
	        startDate: new Date(),
	        autoclose: true,
	        todayBtn: true,
	        language: 'zh-CN',
	        initialDate:new Date(),
	        minView: 1
	    });

})

	$.validator.addMethod("regnumber2",function(value,element,params){
		var regnumber2 = /^[1-9]\d*$/;
		return this.optional(element)||(regnumber2.test(value));
	},"必须是大于0的正整数");
$("#form-add").validate({
	rules:{
		title:{
			required:true
		},
		introduction:{
			required:true,
		},
		number:{
			required:true,
			regnumber2:true
		},
	},
	submitHandler:function(form){
		add();
	}
});

/**
 * 用户添加方法
 */
function add() {
	var imageUrl=$("input[name='imageUrl']").val();
	if (imageUrl==undefined){
		$.modal.msg("请点击上传图片!");
		return;
	}
	var dataFormJson=$("#form-add").serialize();
	$.ajax({
		cache : true,
		type : "POST",
		url : rootPath + "/TAbbQuanchengController/add",
		data : dataFormJson,
		async : false,
		error : function(request) {
			$.modal.alertError("系统错误");
		},
		success : function(data) {
			$.operate.saveSuccess(data);
		}
	});
}


</script>


</body>


</html>
